<%@ page pageEncoding="utf-8" import="java.util.*" %>
<%@ page import="com.listener.pojo.Pokemon" %>
<%@ page import="com.listener.pojo.Page" %>
<%@ page import="com.listener.pojo.Move" %>
<html>
<head>
    <jsp:include page="head.jsp">
        <jsp:param name="title" value="招式列表"/>
    </jsp:include>
</head>
<body class="pageTable">

<jsp:include page="/web/nav.jsp">
    <jsp:param name="fun" value="move"/>
</jsp:include>
<%
    Map<String,String> typeColors= (Map<String, String>) session.getAttribute("typeColors");
    List<Map<String,Object>> categories= (List<Map<String, Object>>) session.getAttribute("categories");
    Move moveCondition = (Move) request.getSession().getAttribute("moveCondition");
    Page<Move> pages= (Page<Move>) request.getAttribute("movePage");
    List<Move> moveList=pages.getPage();
%>
<div class="row">
    <div class="col-md-1">
        <button onclick="goBack()"  class="backButton" >返回</button>
    </div>
    <div class="col-md-10">
        <div class="pageSearch">
            <form action="<%=request.getContextPath()%>/selectMovePage" method="post" >
                招式名称：<input type="text" name="move" value="<%=(moveCondition!=null && moveCondition.getMove()!=null)?moveCondition.getMove():""%>">&nbsp&nbsp&nbsp&nbsp

                招式属性：<select class="typeSelect" name="type">
                    <option value="" style="color: black">
                        不限
                    </option>
                    <%
                        List<Map<String,Object>> types=(List<Map<String,Object>>)
                                request.getSession().getAttribute("types");
                        for (Map<String, Object> type : types) {
                    %>
                    <option value="<%=type.get("type")%>" style="
                        background-color: <%=typeColors.get(type.get("type"))%>"
                            <%=((moveCondition!=null)&&
                                    (type.get("type").equals(moveCondition.getType())))?"selected":""%>>
                        <%=type.get("type")%>
                    </option>
                    <%
                        }
                    %>
            </select>&nbsp&nbsp&nbsp&nbsp
                招式类型：<select class="typeSelect" name="category">
                <option value="" style="color: black">
                    不限
                </option>
                <%
                    for (Map<String, Object> category : categories) {
                %>
                <option value="<%=category.get("category")%>" style="color: black"
                        <%=((moveCondition!=null)&&
                                (category.get("category").equals(moveCondition.getCategory())))?"selected":""%>>
                    <%=category.get("category")%>
                </option>
                <%
                    }
                %>
            </select>&nbsp&nbsp&nbsp&nbsp
                描述：<input type="text" name="description" value="<%=(moveCondition!=null && moveCondition.getDescription()!=null)?moveCondition.getDescription():""%>">&nbsp&nbsp&nbsp&nbsp
                <input class="btn btn-default" type="submit" value="查询">
            </form>
        </div>
        <table border="2px black" style="width: 100%;">
            <tr class="moveTh">
                <th>编号</th>
                <th>招式</th>
                <th>属性</th>
                <th>类型</th>
                <th>威力</th>
                <th>命中</th>
                <th>PP</th>
                <th width="300">描述</th>
                <th>wiki链接</th>
            </tr>
            <%
                if(moveList!=null && moveList.size()>0)
                {
                    for(Move move : moveList){
            %>
            <tr class="moveTr">
                <td><%=move.getMoveId()%></td>
                <td><%=move.getMove()%></td>
                <td>
                    <img src="<%=request.getContextPath()%>/img/type/<%=move.getType()%>.png"
                         height="25">
                </td>
                <td><%=move.getCategory()%></td>
                <td><%=move.getPower()%></td>
                <td><%=move.getPP()%></td>
                <td><%=move.getAccuracy()%></td>
                <td><%=move.getDescription()%></td>
                <td>
                    <a href="<%=move.getWikiUrl()%>" title="前往wiki查看关于【<%=move.getMove()%>】的更多事情">
                        <%=move.getMove()%>-wiki
                    </a>
                </td>
            </tr>
            <%
                }
            %>

            <%
                }
            %>
        </table>
        <form action="<%=request.getContextPath()%>/selectMovePage" method="post">
            <ul class="pagination justify-content-center" >
                <li class="page-item <%=(pages.getPageNum()!=1)?"":"disabled"%>"><a class="page-link"
                                                                                    href="<%=request.getContextPath()%>/selectMovePage?pageNum=<%=pages.getPageNum()-1%>"
                >上一页</a></li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">
                        当前第<%=pages.getPageNum()%>页&nbsp;共<%=pages.getPageSum()%>页</a>
                </li>
                <li class="page-item">
                    <p class="page-link">
                        <input  type="submit" value="跳转到" style="background-color: white;border: none">
                        第<input id="pageNumInput" type="text" name="pageNum" style="height: 18px;width: 40px;text-align: center" value="<%=pages.getPageNum()%>">页</p>
                </li>
                <li class="page-item <%=(pages.getPageNum()!=pages.getPageSum())?"":"disabled"%>"><a class="page-link"
                                                                                                     href="<%=request.getContextPath()%>/selectMovePage?pageNum=<%=pages.getPageNum()+1%>"
                >下一页</a></li>
            </ul>
        </form>
    </div>
    <div class="col-md-1"></div>
    <script>
        function goBack() {
            window.history.back();
        }
        $().ready(function(){
            $("#pageNumInput").blur(function(){
                if(!Number.isInteger(+$(this).val()))
                {
                    $(this).val(<%=pages.getPageNum()%>);
                }else{
                    let number=+$(this).val();
                    if(number<1 || number><%=pages.getPageSum()%>){
                        $(this).val(<%=pages.getPageNum()%>);
                    }
                }
            })
        });
    </script>
</div>
</body>
</html>
